import React,{Component} from 'react';
import {Prompt} from 'react-router';
import {connect} from 'react-redux'
import mapDispatchToProps from '../actions/mapDispatchToProps'
import mapStateToProps from '../value/mapStateToProps'

import { Collapse ,Button} from 'element-react';
import 'element-theme-default';

class  Carts extends Component{
    constructor(props){
        super(props);
        this.state={
            goodmessage:[],
           activeName : "1" ,
           goodchange:0            
        }
     }
    componentWillMount=()=>{
        //下面是获取store里面的购物车信息
       this.props.getDatabaselist()
      
    }
    creatnum=(e)=>{//增加购物车产品数量
        e.preventDefault()  
        var activeName=e.target.getAttribute("name")  
        this.props.carts.map((value,index)=>{
            if(value._id==e.target.getAttribute("data-id")){
                value.num+=1 
                console.log('value.num+=1 ',value)
                this.props.fromCartAddToDatabaceCart(value)
            }           
        })
        this.setState({
            activeName:activeName
        })          
    }
    decreatnum=(e)=>{//减少产品的购买数量
        e.preventDefault()
        var activeName=e.target.getAttribute("name") 
        this.props.carts.map((value,index)=>{
            if(value._id==e.target.getAttribute("data-id")){
                if(value.num==1){
                   var con=confirm("确定不需要《"+value.title+"》这个商品了吗？")
                   if(con){
                       this.props.goodDelete(value._id)
                   }                   
                }else{
                    value.num-=1  
                    this.props.fromCartAddToDatabaceCart(value)
                    this.setState({
                        activeName:activeName
                    })  
                }
            }         
        })
    }
    delectGoods=(e)=>{//删除这个产品
        e.preventDefault()  
        var con=confirm("确定不需要《"+e.target.getAttribute("title")+"》这个商品了吗？")
        if(con){
            this.props.goodDelete(e.target.getAttribute("data-id") )
        }                   
        }           
    allShow=()=>{//全部显示需要支付购买的产品
        var active=[]
        for(var i=1;i<=this.props.carts.length;i++){
                active.push(i.toString()) 
        }
        this.setState({
            activeName:active
        })
    }
    allClose=()=>{   //全部收缩需要购买的产品    
        this.setState({
            activeName:[]
        })
    }

	render(){
        var sss=this.props.carts
        const activeName = this.state.activeName;     
        var buyGood=[]
        if(sss.length<=0){
            buyGood=(<div>你的购物车什么东西都没有啊</div>) 
        }else{
            
      
        sss.map((value,index)=>{
            var gender=[];
            value.genders.map((val)=>{
                gender.push(
                    <span key={val}>{val}/ </span>
                )
            })
            var Subtotal=value.num*value.price
            buyGood.push(
                <Collapse.Item title={value.title} name={(index+1).toString()} key={index}>
                    <div className="row">
                        <div className="col-md-1">
                        <img src="http://img3.doubanio.com/view/photo/s_ratio_poster/public/p2455050536.jpg" alt={this.original_title} style={{height:"100px"}}/>
                        </div>
                        <div className="col-md-9">                          
                            <p>产品单价:<b>{value.price}</b></p>
                            <p>产品详情:<b>{gender}</b></p>
                            <p>采购数量
                                <button data-id={value._id} name={(index+1).toString()} onClick={this.creatnum}>+</button>
                                <span>{value.num}</span>
                                <button  data-id={value._id} name={(index+1).toString()} onClick={this.decreatnum}>-</button>
                            </p>
                        </div>
                        <div className="col-md-2">
                        {/* <Button  data-id={value.id} name={(index+1).toString()} onClick={this.delectGoods}>删除这个产品</Button> */}
                        <button  data-id={value._id} title={value.title} name={(index+1).toString()} onClick={this.delectGoods}>删除这个产品</button>
                        <div>
                            <h5>费用小计：</h5>
                            <span>￥</span><b>{Subtotal}</b>
                        </div>
                        </div>
                    </div> 
                    </Collapse.Item> 
            )
        }) 
    }
		return (
			<div>Carts
			   <Prompt message="确定要离开吗？？"/>
			   <p>sha ?</p>
               <Button type="info" onClick={this.allShow}>购物车商品全部显示</Button>
               <Button type="info" onClick={this.allClose}>购物车商品全部收缩</Button>
               
               <Collapse value={activeName}> 
                    {buyGood}              
               </Collapse>
			</div>
		)
	}
}

export default connect(mapStateToProps,mapDispatchToProps)(Carts)
